<template>
  <el-card :shadow="edit ? 'hover' : 'never'" :class="edit ? 'cursor' : ''">
    <div
      class="pre-line"
      v-if="content && !showEditor"
      @dblclick="dblclick(content)"
    >
      {{ content }}
    </div>
    <el-button
      v-if="!showEditor && !content"
      type="primary"
      @click="showEditor = true"
    >
      写日报
    </el-button>
    <div v-if="showEditor">
      <el-input
        v-model="writeValue"
        :autosize="{ minRows: 4, maxRows: 8 }"
        type="textarea"
        placeholder="请输入内容，不少于300字"
        ref="inputRef"
      />

      <div class="flex-between" style="margin-top: 10px">
        <el-text type="info"> 当前字数：{{ writeValue.length }}</el-text>
        <div>
          <el-button @click="showEditor = false"> 取消 </el-button>
          <el-button type="primary" @click="saveDaily"> 保存 </el-button>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ref, watch, onMounted, nextTick } from "vue";
import api from "@/api";
import { dateFormat } from "@/utils/index";
const props = defineProps({
  date: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
  edit: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["refresh", "onEdit"]);

const userAcc = localStorage.getItem("userAcc") as string;

const inputRef = ref();
const showEditor = ref(false);
const writeValue = ref("");
const loading = ref(false);

watch(showEditor, (bool) => {
  if (!bool) {
    writeValue.value = "";
  } else {
    nextTick(() => {
      inputRef.value?.focus();
    });
  }
});

function saveDaily() {
  if (writeValue.value) {
    // if (props.content) {
      emit("onEdit", writeValue.value);
      showEditor.value = false;
    // } else {
    //   const obj = {
    //     acc: userAcc,
    //     date: dateFormat(props.date),
    //     report: writeValue.value,
    //   };
    //   loading.value = true;
    //   api.dailyReport
    //     .saveDailyReport(obj)
    //     .then((res: any) => {
    //       if (res.success) {
    //         loading.value = false;
    //         showEditor.value = false;
    //         emit("refresh");
    //       }
    //     })
    //     .catch(() => {
    //       loading.value = false;
    //     });
    // }
  }
}

function dblclick(data: string) {
  if (props.edit) {
    writeValue.value = data;
    showEditor.value = true;
  }
}

onMounted(() => {});
</script>
<style lang="scss" scoped></style>
